<template>
  <div>
    <van-grid :border="false" :column-num="3" >
    
  <van-grid-item  url="/buyticket" >
    <van-image style="width:50px" src="/images/1icon.jpg" />
    <p>门票</p>
  </van-grid-item>
  
  <van-grid-item url="/hotel">
    <van-image style="width:50px" src="/images/2icon.jpg"  />
    <p>酒店</p>
  </van-grid-item>
  <van-grid-item url="/taocan">
    <van-image style="width:50px" src="/images/3icon.jpg" />
    <p>套餐</p>
  </van-grid-item>
</van-grid>
    <hr style="height:4px; background-color:#f9f9f9;border:none">
    <router-link to="/buyticket">
    <div id="card">
      <div>门票产品</div>
      <div>
        <img src="/images/8.jpg" alt="" />
        <div >单日门票 &nbsp;&nbsp;￥288.00起</div>
      </div>
    </div>
    </router-link>
    <hr style="height:4px; background-color:#f9f9f9;border:none">
    <router-link to="/hotel" >
    <div id="hotel">
      
      <div>酒店</div>
      
      <div>
        <div>
          <img class="img1" src="/images/7.jpg" alt="" />
          <div>博鳌大酒店</div>
          <div>￥398.80起</div>
        </div>
        <div>
          <div id="left">
            <img  class="simg2" src="/images/5.jpg" alt="" />
            <p>豪华大床房</p>
            <div>￥458.00起</div>
          </div>
          <div id="right">
            <img  class="simg3" src="/images/6.jpg" alt="" />
            <p>豪华双床房</p>
            <div>￥458.00起</div>
          </div>
          
          
        </div>
      </div>
        
    </div>
    </router-link>
  </div>
</template>
<style scoped> 
p{
  color: #333333;
}
#card > div:first-child {
  margin: 15px 0px 15px 20px;
  font-size: 1.3rem;
  font-weight: bold;
}
#card > div:last-child > img {
  border: 1px solid gray;
  border-radius: 10px;
  width: 90vw;
  height: 41vw;
  margin: 0px 17px;
}
#card > div:last-child > img+div{
    font-weight: bold;
    margin: 15px 0  15px 20px;
}
#hotel > div:first-child {
  margin: 25px 0px 25px 20px;
  font-size: 1.3rem;
  font-weight: bold;
}
#hotel>div:last-child>div:first-child{
  position: relative;
}
#hotel>div:last-child>div:first-child>div:last-child{
  position: absolute;
  right: 45px;
  bottom: 15px;
  color: white;
}
#hotel>div:last-child>div:first-child>img+div{
  position: absolute;
  left: 40px;
  bottom: 35px;
  color: white;
  font-size: 1.1rem;
}
#hotel > div:last-child > div:first-child > img {
  border: 1px solid rgb(255, 255, 255);
  border-radius: 10px 10px 0 0;
  width: 89vw;
  height: 43vw;
  margin: 0px 17px -1.5px 17px;
}
#hotel > div:last-child > div:last-child {
  display: flex;
  margin: 0px 17px 10px 17px;
}
#hotel > div:last-child > div:last-child >div> img {
  border: 1px solid rgb(255, 255, 255);
  width: 44vw;
  height: 29vw;
}
.simg2 {
  margin-right: 2.5px;
  border-radius: 0 0 0 10px;
}
.simg3{
  border-radius: 0 0 10px 0;
}
#left{
  position: relative;
}
#left>p{
  position: absolute;
  left: 25px;
  bottom: 20px;
  color: white;
}
#left>div{
  position: absolute;
  left: 25px;
  bottom: 10px;
  color: white;
}
#right{
  position: relative;
}
#right>p{
  position: absolute;
  left: 25px;
  bottom: 20px;
  color: white;
}
#right>div{
  position: absolute;
  left: 25px;
  bottom: 10px;
  color: white;
}
</style>